<template>
	<el-card shadow="never" header="应用总占比">
		<el-progress :text-inside="true" :stroke-width="20" :color="color" :percentage="value" :format="format"/>
		<el-row :gutter="15" style="margin-top: 20px;">
			<el-col :lg="6">
				<el-card shadow="never">
					<jd-statistic title="应用数量" value="7.41" suffix="个" groupSeparator></jd-statistic>
				</el-card>
			</el-col>
			<el-col :lg="6">
				<el-card shadow="never">
					<jd-statistic title="发布次数" value="6521" suffix="次" groupSeparator></jd-statistic>
				</el-card>
			</el-col>
			<el-col :lg="6">
				<el-card shadow="never">
					<jd-statistic title="记录条数" value="523" suffix="条" groupSeparator></jd-statistic>
				</el-card>
			</el-col>
			<el-col :lg="6">
				<el-card shadow="never">
					<jd-statistic title="审批次数" value="56256" suffix="次" groupSeparator></jd-statistic>
				</el-card>
			</el-col>
		</el-row>
	</el-card>
</template>

<script>
	import jdStatistic from '@/components/jdStatistic';

	export default {
		components: {
			jdStatistic
		},
		data() {
			return {
				value: 39.58,
				color: [
					{ color: '#67C23A', percentage: 40 },
					{ color: '#E6A23C', percentage: 60 },
					{ color: '#F56C6C', percentage: 80 },
				]
			}
		},
		methods: {
			format(percentage){
				return percentage + "%"
			}
		}
	}
</script>

<style>
</style>
